<template>
   <div class="classfils">
       <div class="left">
           <p v-for="(item,index) in classleftList" :key="index" :class="index==ind?'active':''" @click="leftList(index)">
               {{item.title}}
           </p>
       </div>
       <div class="right">
           <ul class="righthead" v-if="classleftList[ind]">
               <li v-for="(item,index) in classleftList[ind].children" :key="index" @click="rightList(index)" :class="index==cur?'active':''">{{item.name}}</li>
           </ul>
          <div v-if="classrightList.length==0">暂无数据</div>
          <home-item v-for="(item,index) in classrightList" :key="index" :item="item"></home-item>
       </div>
   </div>
</template>

<script>
import {shopType,selectType} from "../../../api/api"
import homeItem from '../../components/homeItem.vue'
export default {
  components: { homeItem },
   data(){
       return {
            classleftList:[
                {
                    children:[]
                }
            ],
            ind:0,       //左侧下标
            classrightList:[],
            cur:0,        //右侧下标

       }
   },
   async created(){
       let res=await shopType();
       this.classleftList=res.data.data;
       this.getList()
   },
   methods:{
      leftList(ind){
         this.ind=ind;
         this.cur=0;
         this.classrightList=[];
         this.getList()
      },
     rightList(ind){
         this.cur=ind
         this.getList();
      },
      async getList(){   
        if(this.classleftList[this.ind].children.length!==0){
            let {id,parent_id}=this.classleftList[this.ind].children[this.cur]
             let res=await selectType({
           type_id:parent_id,
           category_id:id
          })
       if(res.status ==200){
           this.classrightList=res.data.data
       }
        }
      
      }
   }
}
</script>

<style lang="scss">
.classfils{
    width: 100%;
    height: 100%;
   display: flex;
   .left{
       width: 100px;
       height: 100%;
       border-right: 1px solid #ccc;
       text-align: center;
       line-height: 50px;
       p{
           border-bottom: 1px solid #ccc;
       }
   }
   .right{
       flex: 1;
        .righthead{
        display: flex;
        justify-content: space-around;
   }
   }
  
}

.active{
    color: red;
}
</style>